<template>
  <div class="app-container">
    <el-form
      ref="form"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      @submit.native.prevent="queryDetailByInput"
    >
      <el-form-item>
        <el-input
          style="width: 480px"
          ref="keywordsInput"
          v-model="formData.keywords"
          placeholder="请输入订单号、水洗码、物流单号，或者扫描物流单号、水洗码"
        >
          <!-- <template slot="append">
            <el-button
              icon="el-icon-search"
              @click="queryDetailByInput"
            ></el-button>
          </template> -->
        </el-input>
      </el-form-item>


       <el-form-item>

          <el-date-picker
            v-model="formData.date"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="订单开始日期"
            end-placeholder="订单结束日期"
            align="right">
         </el-date-picker>

      </el-form-item>

        <el-form-item>

         <el-button @click="queryDetailByInput">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>

    </el-form>

    <div style="margin-bottom: 30px">
      今日入库统计： {{ todyStatistics === null ? "-" : todyStatistics }}
    </div>

    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column prop="orderNo" label="订单号" width="200">
      </el-table-column>
      <el-table-column prop="customPhone" label="手机号码" width="120">
      </el-table-column>
      <el-table-column label="商品信息" prop="orderGoodsNames">
        <!-- <template slot-scope="scope">
          <div v-for="item in scope.row.orderGoodPoList">
            {{ productListMap[item.goodsId].name }}[{{
              productListMap[item.goodsId].price
            }}][{{ item.buyNum }}份]
          </div>
        </template> -->
      </el-table-column>

      <el-table-column
        prop="wayBillCodeNameList"
        label="物流单号"
      ></el-table-column>
      <el-table-column prop="checkInTime" label="入库时间"></el-table-column>
      <el-table-column prop="checkInPerson" label="入库人"></el-table-column>
      <el-table-column label="门店名称">
        <template slot-scope="scope">
          {{ shopListMap[scope.row.shopId].shopName }}
        </template>
      </el-table-column>

      <el-table-column label="清洗工厂" prop="washFactory" />
      
   

      <el-table-column label="操作" width="100px" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="detail(scope.row.orderNo)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getListData"
    />

    <InStorageDetail
      :drawerVisible="drawerVisible"
      :keywords="keywords"
      :productListMap="productListMap"
      @close="drawerVisible = false"
      @refresh="refreshList"
    />
  </div>
</template>

<script>
var nowDate=new Date()
var yearMonth=nowDate.getFullYear()+"-"+(nowDate.getMonth()+1)+"-"+nowDate.getDate()
import {
  getInStorageLogList,
  getTodayInStorageStatistics,
} from "@/api/order/index";
import { parseTime } from '@/utils/ruoyi'
import { getShopGoods } from "@/api/product";
import { getShopList } from "@/api/shop/index";
import InStorageDetail from "./inStorageDetail.vue";
import {
  orderComeFromMap,
  orderComeFromList,
  orderStatusMap,
  orderStatusList,
} from "@/config";
export default {
  name: "Index",
  components: {
    InStorageDetail,
  },
  data() {
    return {
      loading: false,
      queryParams: {
        page: 0,
        limit: 10,
        total: 0,
      },
      list: [],
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      orderComeFromMap,
      orderStatusMap,
      productListMap: {},
      shopListMap: {},

      formData: {
        keywords: "",
        date:[new Date(yearMonth+" 00:00:00"),new Date(yearMonth+" 23:59:59")]
      },
      orderComeFromList,
      orderStatusList,

      drawerVisible: false,
      keywords: "",
      todyStatistics: null,
    };
  },
  created() {
    getShopGoods(
      {
        extendInfo: "abc",
      },
      1,
      999999
    ).then((res) => {
      let productListMap = {};
      res.data.records.forEach((item) => {
        productListMap[item.id] = item;
      });
      this.productListMap = productListMap;
      this.getListData({
        page: 1,
        limit: 10,
      });
    });

    getShopList({}, 1, 999999).then((res) => {
      let shopListMap = {};
      res.data.records.forEach((item) => {
        shopListMap[item.id] = item;
      });
      this.shopListMap = shopListMap;
    });

    this.getStatistics();
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.keywordsInput.focus();
    });
  },
   watch: {
      // 监听 drawerVisible 变化，当抽屉关闭时自动聚焦输入框
      drawerVisible(newVal) {
        if (!newVal) {
          setTimeout(() => {
            this.$refs.keywordsInput.focus();
          }, 200); // 延迟 200ms，确保抽屉关闭动画结束后再聚焦
        }
      },
    },
  methods: {

    reset(){
    //  console.info("重置了")
     this.formData={}
     this.getListData({
      ... this.queryParams
     })

    },
    getStatistics() {
      getTodayInStorageStatistics().then(({ data }) => {
        this.todyStatistics = data;
      });
    },
   
    getListData({ page, limit ,dataParam}) {
      this.loading = true;
      getInStorageLogList({... dataParam, 
        startTime:parseTime(this.formData.date[0]),
        endTime:parseTime(this.formData.date[1]),
        searchString:this.formData.keywords
      }, page || this.queryParams.page + 1, limit)
        .then(({ data }) => {
          this.list = data.records;
          this.queryParams.total = data.total;
          this.queryParams.page = data.current;
          this.queryParams.limit = data.size;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    detail(keywords) {
      this.keywords = keywords;
      this.drawerVisible = true;
    },
    onSearch() {
      this.queryParams = {
        ...this.queryParams,
        ...this.formData,
      };
      this.getListData({
        page: 1,
        limit: 10,
      });
    },
    refreshList() {
      this.$message.success("入库成功");
      this.drawerVisible = false;
      this.getStatistics();
      this.getListData({
        page: 1,
        limit: this.queryParams.limit
      });
    },

    queryDetailByInput(e) {
      e.preventDefault();
      this.getListData({
        page: 1,
        limit: this.queryParams.limit
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  margin-bottom: 20px;
}
</style>
